<template>
  <!-- 放入头部组件 -->
  <navbar title="个人中心"></navbar>
  <!-- person information -->
  <!-- user-top -->
  <view class="personInformation">
    <template v-if="userInfo.nickName && userInfo.avatarUrl">
      <image class="personImg" :src="userInfo.avatarUrl" mode="aspectFill"></image>
      <view class="personName">{{ userInfo.nickName }}</view>
    </template>
    <template v-else>
      <view class="avatar-container">
        <open-data type="userAvatarUrl" class="personImg" mode="aspectFill"></open-data>
      </view>
      <open-data type="userNickName" class="personName"></open-data>
    </template>
    <view class="personDetail" @click="goToPersonInformation">
      <image src="@/static/最新政策详情ico.png"></image>
    </view>
  </view>

  <!-- history -->
  <view class="history" @click="goToQAhistory">
    <image src="@/static/问答历史ico.png" class="left"></image>
    <text>问答历史</text>
    <image src="@/static/最新政策详情ico.png" class="right"></image>
  </view>
  <!-- three -->
  <view class="three">
    <!--    <view class="history">
      <image src="@/static/我的订阅ico.png" class="left"></image>
      <text>我的订阅</text>
      <image src="@/static/最新政策详情ico.png" class="right"></image>
    </view> -->
    <view class="history" @click="goToCollection">
      <image src="@/static/我的收藏ico.png" class="left"></image>
      <text>我的收藏</text>
      <image src="@/static/最新政策详情ico.png" class="right"></image>
    </view>
    <!--    <view class="history" @click="goToHistory">
      <image src="@/static/浏览历史ico.png" class="left"></image>
      <text>浏览历史</text>
      <image src="@/static/最新政策详情ico.png" class="right"></image>
    </view> -->
  </view>
  <!-- two -->
  <view class="two">
    <view class="history" @click="goToPrivacyPolicy">
      <image src="@/static/隐私政策ico.png" class="left"></image>
      <text>隐私政策</text>
      <image src="@/static/最新政策详情ico.png" class="right"></image>
    </view>
    <view class="history" @click="goToDisclaimer">
      <image src="@/static/免责声明ico.png" class="left"></image>
      <text>免责声明</text>
      <image src="@/static/最新政策详情ico.png" class="right"></image>
    </view>
  </view>
</template>

<script setup>
  import navbar from '@/components/navbar/navbar.vue'
  import {
    ref,
    reactive
  } from "vue"
  import {
    onShow,
    onLoad
  } from '@dcloudio/uni-app'
  import {
    login,
    getUser
  } from '@/api/person.js'
  const userInfo = ref({
    nickName: '',
    avatarUrl: ''
  })
  onShow(() => {
    getUser().then(res => {
      if (res.code === 200) {
        userInfo.value.nickName = res.data.nikeName
        userInfo.value.avatarUrl = res.data.avatar
      }
    })
  })
  // 添加：个人信息页面跳转
  const goToPersonInformation = () => {
    uni.navigateTo({
      url: '/pages/personInformation/personInformation'
    });
  }
  const goToQAhistory = () => {
    uni.navigateTo({
      url: '/pages/QAhistory/QAhistory'
    })
  }
  const goToCollection = () => {
    uni.navigateTo({
      url: '/pages/collection/collection'
    })
  }
  const goToHistory = () => {
    uni.navigateTo({
      url: '/pages/history/history'
    })
  }
  // 添加：隐私政策页面跳转
  const goToPrivacyPolicy = () => {
    uni.navigateTo({
      url: '/pages/privacyPolicy/privacyPolicy'
    });
  }
  // 添加：免责声明页面跳转
  const goToDisclaimer = () => {
    uni.navigateTo({
      url: '/pages/disclaimer/disclaimer'
    });
  }
</script>

<style lang="scss">
  page {
    background-image: url('@/static/对话背景ico.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }

  .leftlogo {
    width: 200rpx;
    height: 48rpx;
  }


  .personInformation {
    .avatar-container {
      border: 2rpx solid #eee;
      border-radius: 25%;
      overflow: hidden;
      /* 确保头像圆角生效 */
    }

    display: flex;
    padding: 40rpx 0 40rpx 30rpx;
    align-items: center;
    justify-content: left;
    height: 208rpx;
    background-color: #fff;
    box-sizing: border-box;

    .personImg {
      border-radius: 25%;
      width: 128rpx;
      height: 128rpx;
    }

    .title {
      padding-left: 20rpx;
    }

    .personName {
      margin-left: 24rpx;
      align-items: center;
      justify-content: left;
      font-family: Source Han Sans CN;
      font-size: 42rpx;
      font-weight: 700;
      font-stretch: normal;
      line-height: 71rpx;
      letter-spacing: 0rpx;
      color: #333333;
    }

    .personDetail {
      margin-left: auto;
      margin-right: 40rpx;

      image {
        width: 12rpx;
        height: 21rpx;
      }
    }
  }

  .history {
    display: flex;
    margin-top: 24rpx;
    height: 114rpx;
    align-items: center;
    justify-content: left;
    background-color: #fff;

    .left {
      margin-left: 30rpx;
      width: 34rpx;
      height: 34rpx;
    }

    text {
      margin-left: 13rpx;
      font-size: 12px;
      color: #000;
    }

    .right {
      margin-left: auto;
      margin-right: 40rpx;
      width: 12rpx;
      height: 21rpx;
    }
  }

  .three {
    .history {
      margin-top: 0;
    }

    margin-top: 24rpx;
  }

  .two {
    .history {
      margin-top: 0;
    }

    margin-top: 24rpx;
  }

  /* 登录弹窗样式 */
  .login-popup {
    padding: 40rpx;
    text-align: center;

    .title {
      font-size: 32rpx;
      margin-bottom: 40rpx;
    }

    .avatar-btn {
      background: none;
      padding-top: 25rpx;
      margin-bottom: 30rpx;

      .avatar {
        width: 120rpx;
        height: 120rpx;
        border-radius: 25%;
      }
    }

    .nickname-input {
      display: flex;
      align-items: center;
      margin: 30rpx 0;
      padding: 0 20rpx;

      input {
        flex: 1;
        height: 60rpx;
        border: 1rpx solid #eee;
        border-radius: 10rpx;
        padding: 0 20rpx;
      }
    }

    .confirm-btn {
      background: #007aff;
      color: white;
      height: 80rpx;
      line-height: 80rpx;
      border-radius: 40rpx;
      margin-top: 40rpx;
    }
  }

  open-data.personImg {
    border-radius: 25%;
    width: 128rpx;
    height: 128rpx;
    display: block;
  }

  open-data.avatar {
    width: 120rpx;
    height: 120rpx;
    border-radius: 25%;
    margin: 0 auto 30rpx;
    display: block;
  }
</style>